<template>
<div style="width:1200px;margin:0 auto;overflow:hidden;height:100px" class="getGoodsType">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"  style="position:relative">
        <el-menu-item v-for="(item,index) in data1" :key="index" :index='index'  :data_id="item.id" @click="getId(item.id)">{{item.name}}
        </el-menu-item>
        
    </el-menu>
    <div v-for="(item,index) in data1" :key="index" style="position:absolute;left:;top:90px;width:100%" :data_id="item.id" class="secNav">
        <el-menu :default-active="activeIndex1" class="el-menu-demo" mode="horizontal" v-if="item.info" style="position:absolute;top:40px;left:0px;width:1200px">
            <el-menu-item v-for="(item1,index1) in item.info" :key="item1" :index='index1'  :data_id="item1.id" @click="getId1(item1.id)" style="float:left">{{item1.name}}</el-menu-item>
        </el-menu>
    </div>
</div>
    
</template>

<script>
export default {
  name: "goodsClassify",
  data() {
    return {
        activeIndex:'0',
        activeIndex1:'0',
    };
  },
  props:['data1','id'],
  methods:{
        getId1:function(id){
            this.$emit('getId',id);
            proPagation(event)
        },
        getId:function(id){
            this.activeIndex1="0";
            var secNav=document.getElementsByClassName('secNav');
            for(var i=0;i<secNav.length;i++){
                secNav[i].style.display='none';
                if(secNav[i].getAttribute('data_id')==id){
                    secNav[i].style.display="block";                
                }
            }
            this.$emit('getId',id);
            proPagation(event)
        },
  }
};
</script>

<style scoped lang="scss">
.secNav{
    display: none;
}
.secNav:first-child{
    display:block;
}
.getGoodsType{
    .el-menu-item{
        line-height: 2em;
        height:2em;
        padding:0px;
        margin:16px 20px;
    }
}
.el-menu-item.is-active {
   color: #FF4C50!important;
   border-bottom:1px #FF4C50 solid !important;
}
.el-menu.el-menu--horizontal{
  border:none!important;
}
</style>
